<template>
  <div class="prop propd">
    <div class="prop" >
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:500px;">
        <div class="propheader">
          添加付款计划
          <p class="close1" @click="closeMoney">关闭</p>
        </div>
        <div class="getmoney">
          <div class="topinfo">
            <p>付款日期</p>
            <el-date-picker type="date" v-model="payData.time" style="width:200px;" format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          </div>
          <div class="topinfo">
            <p>项目</p>
            <el-select style="width:200px;" @change="changeType($event)" v-model="payData.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="topinfo">
            <p>金额</p>
            <el-input style="width:150px;" v-model="payData.money"></el-input>
            <p style="margin-left:5px;">万元</p>
          </div>
          <div class="addsave">
            <el-button type="primary" style="margin:0 auto;" @click="add" v-if="!type">添加</el-button>
             <el-button type="primary" style="margin:0 auto;" @click="save" v-else>保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import {
  GET_CONTRACT_BACK_PROJECT
} from "../../../api/Salesman.js";

import { SETDATE } from "@/api/System.js";
import formatEveryDay from "./timeFormat.js";
import moment from 'moment'
import data from '../motheds';
import generateUUID from './uuid.js'
// import { ElTimeSelect } from 'element-ui/types/time-select';
export default {
  props: ['moneyData','type'],
  data() {
    return {
      payData:{
          time:'',
        money:'',
        type:'',
        typeName:''

      },
      options:[
          
      ]
    };
  },
  
  methods: {
    getType(){
      GET_CONTRACT_BACK_PROJECT({}).then(res=>{
        if (res.code == 200) {
          this.options = res.data
        }
      })
    },
    closeMoney(){
        this.$emit('closeMoney')
    },
    changeType(e){
      
        let index = ''
        this.payData.id = e
        this.options.forEach((element,i)=>{
        
        if (element.id == e) {
            this.payData.typeName = element.name
        }
    })
    },
    add(){
        this.payData.timeStamp=moment(this.payData.time).unix()
        this.payData.uid=generateUUID()
        if (this.payData.time == '') {
            this.$message.error('请选择时间')
        }else if (this.payData.money == '') {
            this.$message.error('请输入金额')
        }else if (this.payData.type == '') {
            this.$message.error('请选择')
        }else{
            this.$emit('moneyAdd',{...this.payData})
        }
    },
    save(){
        this.payData.timeStamp=moment(this.payData.time).unix()
        
        if (this.payData.time == '') {
            this.$message.error('请选择时间')
        }else if (this.payData.money == '') {
            this.$message.error('请输入金额')
        }else if (this.payData.type == '') {
            this.$message.error('请选择')
        }else{
            this.$emit('edit',{...this.payData})
        }
    }
  },
  computed: {},
  mounted() {
    if (this.type) {
      this.payData = {...this.type}
    }
    this.getType()
  }
};
</script>
<style lang="scss" scoped>
.close1 {
  cursor: pointer;
}
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.searchlist {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    .name {
      width: 110px;
    }
    .click {
      color: #169bd5;
    }
  }
  .require {
    width: 100%;
    display: flex;
    margin-top: 30px;
    .name {
      width: 110px;
    }
  }
}
.listitem {
  width: 97%;
  margin: 0 auto;
  margin-top: 30px;
  .headertitles {
    display: flex;
    align-items: center;
    .adds {
      color: #169bd5;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .tablists {
    width: 95%;
    padding-left: 5%;
    margin-top: 20px;
  }
}
.otherfile {
  width: 97%;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  .filename {
    width: 200px;
  }
}
.btom {
  width: 500px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-bottom: 200px;
}

.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 600px;
  height: 420px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .info {
    display: flex;
    align-items: center;
    width: 90%;
    p {
      width: 90px;
    }
    .topinfo {
      width: 50%;
      align-items: center;
      display: flex;
    }
  }
  .listtab {
    margin: 0 auto;
    // width: 500px;
    width: 90%;
  }
  .getmoney {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    .addsave {
      margin: 0 auto;
      width: 50px;
      margin-top: 30px;
    }
    .addsave1 {
      margin: 0 auto;
      width: 200px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.propd {
  z-index: 999;
  // display: none;
  .warpprop1 {
    // background: blue;
    background: #fff;
    margin: 0 auto;
    border-radius: 10px;
    width: 800px;
    padding-bottom: 30px;
    // background: red;
    // overflow: auto;
    // height: 500px;

    // height: 100%;
    .tabslist {
      width: 90%;
      margin: 0 auto;
      .block {
        margin-top: 0;
      }
    }
    .info1 {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .inputitem {
        width: 50%;
        display: flex;
        align-items: center;
        .inputname {
          width: 90px;
          margin-left: 20px;
        }
      }
    }
    .saves {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    .pub {
      width: 90%;
      margin: 0 auto;

      .inputitem {
        width: 70%;
        display: flex;
        align-items: center;
        .inputname {
          width: 160px;
          margin-left: 20px;
        }
        .price {
          height: 100%;
          display: flex;
          align-items: center;
          .other {
            margin-left: 3px;
          }
          .others {
            color: #169bd5;
            margin-left: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>